<template>
  <div class="shrimp_price_trend">
    <el-card>
      <template #header>
        虾价趋势
      </template>
      <el-row>
        <div id="line_chart" style="width: 100%; height: 260px;padding-bottom: 20px"></div>
      </el-row>
      <el-row>
        5月对虾均价：9.89元/斤
      </el-row>
      <el-row>
        环比4月：<span style="color: green">-12.52%</span>
      </el-row>
      <el-row>
        同比去年：<span style="color: red"> +1.98%</span>
      </el-row>
      <el-row v-for="shrimpPrice in shrimpPriceCity" :key="shrimpPrice">
        <el-col>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="12" class="title">{{ shrimpPrice.city }}</el-col>
            <el-col :span="12" class="title"
                    :class="{red :shrimpPrice.trend.startsWith('上升'), green: shrimpPrice.trend.startsWith('下降'), blue: shrimpPrice.trend.startsWith('价格平稳')}">
              {{ shrimpPrice.price }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" class="word">{{ shrimpPrice.type }}</el-col>
            <el-col :span="12" class="word"
                    :class="{red :shrimpPrice.trend.startsWith('上升'), green: shrimpPrice.trend.startsWith('下降'), blue: shrimpPrice.trend.startsWith('价格平稳')}">
              {{ shrimpPrice.trend }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
  name: "ShrimpPriceTrend",
  data() {
    return {
      shrimpPriceTrend: {
        eChart: null,
        data: [12, 15, 40, 15]
      },
      shrimpPriceCity: [
        {
          city: "江苏连云港",
          type: "中国对虾",
          price: "15.49元/斤",
          trend: "下降1.53%"
        },
        {
          city: "山东东营",
          type: "中国对虾",
          price: "16元/斤",
          trend: "下降0.93%"
        },
        {
          city: "贵州六盘水",
          type: "中国对虾",
          price: "55元/斤",
          trend: "价格平稳"
        },
        {
          city: "广东潮州",
          type: "中国对虾",
          price: "14.75元/斤",
          trend: "上升48.75%"
        }
      ]
    };
  },
  mounted() {
    const unwrap = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
    this.shrimpPriceTrend.eChart = echarts.init(document.getElementById("line_chart"));
    unwrap(this.shrimpPriceTrend.eChart).setOption({
      series: [{
        type: "line",
        data: this.shrimpPriceTrend.data
      }],
      xAxis: {
        data: ["1月", "2月", "3月", "4月"],
        type: "category"
      },
      yAxis: {
        type: "value"
      },
      grid: {
        width: "200px",
        height: "160px"
      },
      tooltip: {
        trigger: "axis",
        triggerOn: "mousemove|click",
        formatter: "{c0}"
      }
    });
  }
}
</script>

<style scoped>
.title {
  font-size: 14px;
  font-weight: 420;
}

.word {
  font-size: 10px;
  font-weight: 350;
}

.red {
  color: #F56C6C;
}

.blue {
  color: #409EFF;
}

.green {
  color: #67C23A;
}
</style>